@import (reference) '../var.less';

.hairline-common() {
  position      : absolute;
  box-sizing    : border-box;
  content       : ' ';
  pointer-events: none;
}

.hairline(@color: @border-color) {
  .hairline-common();

  // top      : -50%;
  // right    : -50%;
  // bottom   : -50%;
  // left     : -50%;
  border      : 0 solid @color;
  // transform: scale(0.5);
  // width: 200%;
}

.hairline-top(@color: @border-color, @left: 0, @right: 0) {
  .hairline-common();

  top       : 0;
  bottom    : 0;
  right     : @right;
  left      : @left;

  border-top: 1px solid @color;


  border-top: 1px solid @color;

}

.hairline-bottom(@color: @border-color, @left: 0, @right: 0) {
  .hairline-common();

  right        : @right;
  bottom       : 0;
  top          : 0;
  left         : @left;

  border-bottom: 1px solid @color;


  border-bottom: 1px solid @color;

}

.hairline-top-bottom(@color: @border-color, @left: 0, @right: 0) {
  .hairline-common();
  top          : 0;
  right        : @right;
  bottom       : 0;
  left         : @left;

  border-top: 1px solid @color;
  border-bottom: 1px solid @color;


  border-top: 1px solid @color;
  border-bottom: 1px solid @color;

}

.hairline-left(@color: @border-color, @top: 0, @bottom: 0) {
  .hairline-common();

  bottom     : @bottom;
  top        : @top;
  left       : 0;
  right      : 0;

  border-left: 1px solid @color;


  border-left: 1px solid @color;

}

.hairline-right(@color: @border-color, @top: 0, @bottom: 0) {
  .hairline-common();

  right       : 0;
  left        : 0;
  bottom      : @bottom;
  top         : @top;

  border-right: 1px solid @color;


  border-right: 1px solid @color;

}

.hairline-surround(@color: @border-color, @top: 0, @bottom: 0, @right: 0, @left: 0) {
  .hairline-common();

  right : @right;
  left  : @left;
  bottom: @bottom;
  top   : @top;

  border: 1px solid @color;


  border: 1px solid @color;

}
